{% extends "line_base.html" %}

{% block title %}爱国情感提示工程{% endblock %}

{% block content %}
<div class="layui-container" style="padding: 20px;">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h2>爱国情感提示工程系统</h2>
                    <p>基于先进AI技术的爱国情感分析平台，支持多种分析模式和批量处理</p>
                </div>
                <div class="layui-card-body">
                    <!-- 功能介绍 -->
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    <h3>系统功能</h3>
                                </div>
                                <div class="layui-card-body">
                                    <div class="layui-row">
                                        <div class="layui-col-md3">
                                            <div class="layui-card">
                                                <div class="layui-card-body" style="text-align: center;">
                                                    <i class="layui-icon layui-icon-search"
                                                        style="font-size: 48px; color: #1E9FFF;"></i>
                                                    <h4>标准分析</h4>
                                                    <p>基础的爱国情感分析，快速准确</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md3">
                                            <div class="layui-card">
                                                <div class="layui-card-body" style="text-align: center;">
                                                    <i class="layui-icon layui-icon-edit"
                                                        style="font-size: 48px; color: #5FB878;"></i>
                                                    <h4>详细分析</h4>
                                                    <p>五维度深入分析，全面评估</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md3">
                                            <div class="layui-card">
                                                <div class="layui-card-body" style="text-align: center;">
                                                    <i class="layui-icon layui-icon-education"
                                                        style="font-size: 48px; color: #FFB800;"></i>
                                                    <h4>教育导向</h4>
                                                    <p>教育角度分析，提供指导建议</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md3">
                                            <div class="layui-card">
                                                <div class="layui-card-body" style="text-align: center;">
                                                    <i class="layui-icon layui-icon-chart"
                                                        style="font-size: 48px; color: #FF5722;"></i>
                                                    <h4>综合分析</h4>
                                                    <p>最全面的分析模式，多角度评估</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="layui-row" style="margin-top: 20px;">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    <h3>快速操作</h3>
                                </div>
                                <div class="layui-card-body">
                                    <div class="layui-row">
                                        <div class="layui-col-md4">
                                            <button class="layui-btn layui-btn-fluid layui-btn-lg"
                                                onclick="goToBatchAnalyze()">
                                                <i class="layui-icon layui-icon-list"></i> 批量分析作业
                                            </button>
                                        </div>
                                        <div class="layui-col-md4">
                                            <button class="layui-btn layui-btn-fluid layui-btn-lg layui-btn-normal"
                                                onclick="goToSingleAnalyze()">
                                                <i class="layui-icon layui-icon-edit"></i> 单个文本分析
                                            </button>
                                        </div>
                                        <div class="layui-col-md4">
                                            <button class="layui-btn layui-btn-fluid layui-btn-lg layui-btn-warm"
                                                onclick="viewPromptTemplates()">
                                                <i class="layui-icon layui-icon-template-1"></i> 查看提示词模板
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 分析模式说明 -->
                    <div class="layui-row" style="margin-top: 20px;">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    <h3>分析模式说明</h3>
                                </div>
                                <div class="layui-card-body">
                                    <div class="layui-tab layui-tab-brief" lay-filter="analysisModes">
                                        <ul class="layui-tab-title">
                                            <li class="layui-this" lay-id="standard">标准分析</li>
                                            <li lay-id="detailed">详细分析</li>
                                            <li lay-id="educational">教育导向</li>
                                            <li lay-id="comprehensive">综合分析</li>
                                        </ul>
                                        <div class="layui-tab-content">
                                            <div class="layui-tab-item layui-show">
                                                <h4>标准分析模式</h4>
                                                <p>提供基础的爱国情感分析，包括：</p>
                                                <ul>
                                                    <li>爱国情感得分（0-1）</li>
                                                    <li>爱国情感等级分类</li>
                                                    <li>爱国词汇统计</li>
                                                    <li>分析置信度</li>
                                                    <li>简要分析说明</li>
                                                </ul>
                                                <p><strong>适用场景：</strong>快速批量分析，日常作业评估</p>
                                            </div>
                                            <div class="layui-tab-item">
                                                <h4>详细分析模式</h4>
                                                <p>从五个维度深入分析爱国情感：</p>
                                                <ul>
                                                    <li>国家认同感：对祖国的认同和归属感</li>
                                                    <li>民族自豪感：对中华民族的自豪和骄傲</li>
                                                    <li>文化认同：对中华文化的认同和传承</li>
                                                    <li>历史认知：对祖国历史的正确认知</li>
                                                    <li>价值观念：体现的社会主义核心价值观</li>
                                                </ul>
                                                <p><strong>适用场景：</strong>深度分析，详细评估报告</p>
                                            </div>
                                            <div class="layui-tab-item">
                                                <h4>教育导向模式</h4>
                                                <p>从教育角度分析，重点关注：</p>
                                                <ul>
                                                    <li>学生的爱国情感表达是否积极正面</li>
                                                    <li>是否体现正确的国家观、历史观、民族观、文化观</li>
                                                    <li>是否具有正确的价值导向</li>
                                                    <li>爱国情感的表达方式和深度</li>
                                                    <li>教育建议和改进方向</li>
                                                </ul>
                                                <p><strong>适用场景：</strong>教学指导，学生培养</p>
                                            </div>
                                            <div class="layui-tab-item">
                                                <h4>综合分析模式</h4>
                                                <p>最全面的分析模式，包含：</p>
                                                <ul>
                                                    <li>情感表达：爱国情感的表达强度和方式</li>
                                                    <li>内容分析：文本内容体现的爱国元素</li>
                                                    <li>语言特征：使用的爱国相关词汇和表达</li>
                                                    <li>价值判断：体现的价值观念和立场</li>
                                                    <li>教育意义：对学生的教育价值和意义</li>
                                                    <li>改进空间：可以进一步提升的地方</li>
                                                </ul>
                                                <p><strong>适用场景：</strong>全面评估，研究报告</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['element'], function () {
        var element = layui.element;

        // 跳转到批量分析页面
        window.goToBatchAnalyze = function () {
            window.location.href = '/patriotic_prompt/batch_analyze';
        };

        // 跳转到单个文本分析页面
        window.goToSingleAnalyze = function () {
            layer.open({
                type: 1,
                title: '单个文本分析',
                area: ['800px', '600px'],
                content: `
                    <div style="padding: 20px;">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分析模式：</label>
                                <div class="layui-input-block">
                                    <select id="promptType" lay-verify="required">
                                        <option value="standard">标准分析</option>
                                        <option value="detailed">详细分析</option>
                                        <option value="educational">教育导向</option>
                                        <option value="comprehensive">综合分析</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">文本内容：</label>
                                <div class="layui-input-block">
                                    <textarea id="analyzeText" placeholder="请输入要分析的文本内容..." style="height: 300px;"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" onclick="analyzeText()">开始分析</button>
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                                </div>
                            </div>
                        </div>
                        <div id="analyzeResult" style="display: none; margin-top: 20px;">
                            <h4>分析结果：</h4>
                            <div id="resultContent"></div>
                        </div>
                    </div>
                `,
                success: function () {
                    layui.form.render();
                }
            });
        };

        // 查看提示词模板
        window.viewPromptTemplates = function () {
            layer.open({
                type: 1,
                title: '提示词模板',
                area: ['900px', '700px'],
                content: `
                    <div style="padding: 20px;">
                        <div class="layui-tab layui-tab-brief" lay-filter="promptTemplates">
                            <ul class="layui-tab-title">
                                <li class="layui-this" lay-id="standard">标准分析</li>
                                <li lay-id="detailed">详细分析</li>
                                <li lay-id="educational">教育导向</li>
                                <li lay-id="comprehensive">综合分析</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div id="standardTemplate"></div>
                                </div>
                                <div class="layui-tab-item">
                                    <div id="detailedTemplate"></div>
                                </div>
                                <div class="layui-tab-item">
                                    <div id="educationalTemplate"></div>
                                </div>
                                <div class="layui-tab-item">
                                    <div id="comprehensiveTemplate"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                `,
                success: function () {
                    layui.element.render();
                    loadPromptTemplates();
                }
            });
        };

        // 分析文本
        window.analyzeText = function () {
            var text = $('#analyzeText').val();
            var promptType = $('#promptType').val();

            if (!text.trim()) {
                layer.msg('请输入要分析的文本内容', { icon: 2 });
                return;
            }

            layer.msg('正在分析中...', { icon: 16, time: 0 });

            $.ajax({
                url: '/patriotic_prompt/api/analyze_single',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    text: text,
                    prompt_type: promptType
                }),
                success: function (res) {
                    layer.closeAll();
                    if (res.success) {
                        showAnalyzeResult(res.result);
                    } else {
                        layer.msg(res.error || '分析失败', { icon: 2 });
                    }
                },
                error: function () {
                    layer.closeAll();
                    layer.msg('网络错误，请重试', { icon: 2 });
                }
            });
        };

        // 显示分析结果
        function showAnalyzeResult(result) {
            var html = `
                <div class="layui-card">
                    <div class="layui-card-header">
                        <h4>分析结果</h4>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <p><strong>爱国情感得分：</strong>${(result.patriotic_score * 100).toFixed(1)}%</p>
                                <p><strong>爱国情感等级：</strong>${result.patriotic_level}</p>
                                <p><strong>是否具有爱国情感：</strong>${result.is_patriotic ? '是' : '否'}</p>
                                <p><strong>分析置信度：</strong>${(result.confidence * 100).toFixed(1)}%</p>
                            </div>
                            <div class="layui-col-md6">
                                <p><strong>爱国词汇数量：</strong>${result.patriotic_words_count}</p>
                                <p><strong>反爱国词汇数量：</strong>${result.anti_patriotic_words_count}</p>
                                <p><strong>分析模式：</strong>${result.prompt_type}</p>
                                <p><strong>模型类型：</strong>${result.model_type}</p>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">详细分析：</label>
                            <div class="layui-input-block">
                                <textarea readonly style="height: 100px;">${result.patriotic_breakdown}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            $('#resultContent').html(html);
            $('#analyzeResult').show();
        }

        // 加载提示词模板
        function loadPromptTemplates() {
            $.get('/patriotic_prompt/prompt_templates', function (res) {
                for (var key in res) {
                    var template = res[key];
                    $('#' + key + 'Template').html(`
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <h4>${template.name} - ${template.description}</h4>
                            </div>
                            <div class="layui-card-body">
                                <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; white-space: pre-wrap;">${template.template}</pre>
                            </div>
                        </div>
                    `);
                }
            });
        }
    });
</script>
{% endblock %}

